import type { RedisClient } from "@linksaas-minapp/redis-proxy-api"
import s from "./KeyList.module.less"
import { useEffect, useState } from "react"
import { Button, Input, List, Popover, Space } from "antd"
import { MoreOutlined } from "@ant-design/icons"
import classNames from "classnames"

export interface KeyListProps {
    client: RedisClient | null;
    newAddKey: string;
    onChange: (key: string) => void;
}

function KeyList(props: KeyListProps) {
    const [keyList, setKeyList] = useState<string[]>([]);
    const [curKey, setCurKey] = useState("");
    const [curPattern, setCurPattern] = useState("*");

    const loadKeyList = async (pattern: string) => {
        if (props.client == null) {
            return;
        }
        const res = await props.client.coreCommand().scan(0, pattern, 200);
        if (Array.isArray(res)) {
            setKeyList(res[1] as string[]);
        }
    };

    useEffect(() => {
        if (props.client == null) {
            setKeyList([]);
            setCurKey("");
            props.onChange("");
        } else {
            setCurPattern("*");
            loadKeyList("*");
        }
    }, [props.client]);

    async function removeKey(key: string) {
        if (props.client == null) {
            return;
        }
        await props.client.coreCommand().del(key);
        if (key == curPattern) {
            setCurPattern("*");
            await loadKeyList("*");
        } else {
            await loadKeyList(curPattern);
        }
    }

    useEffect(() => {
        if (props.newAddKey != "") {
            setCurPattern(props.newAddKey);
            loadKeyList(props.newAddKey);
            setCurKey(props.newAddKey);
            props.onChange(props.newAddKey);
        }
    }, [props.newAddKey]);

    useEffect(() => {
        if (!keyList.includes(curKey)) {
            if (keyList.length == 0) {
                setCurKey("");
                props.onChange("");
            } else {
                setCurKey(keyList[0]);
                props.onChange(keyList[0]);
            }
        }
    }, [keyList]);

    return (
        <div className={s.contentWrap}>
            <Space style={{ marginTop: "10px", marginLeft: "10px", marginBottom: "10px", borderBottom: "1px solid #e4e4e8", paddingBottom: "10px" }}>
                <Input value={curPattern} onChange={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    setCurPattern(e.target.value ?? "");
                    loadKeyList((e.target.value ?? "") + "*");
                }} disabled={props.client == null} allowClear />
            </Space>
            <List className={s.keyList} dataSource={keyList} renderItem={item => (
                <List.Item key={item} className={classNames(s.key, curKey == item ? s.active : "")}>
                    <div style={{ display: "flex" }}>
                        <div className={s.name} onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setCurKey(item);
                            props.onChange(item);
                        }}>{item}</div>
                        <Popover trigger="click" placement="bottom" content={
                            <div>
                                <Button type="link" danger onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    removeKey(item);
                                }}>删除</Button>
                            </div>
                        }>
                            <MoreOutlined />
                        </Popover>
                    </div>

                </List.Item>
            )} />
        </div>
    )
}

export default KeyList;